<template>
  <div class="home">
    <div class="logo-box"></div>

    <div class="search-box">
      <input type="text" v-model="words" placeholder="请输入关键字">
      <button @click="goSearch">搜索一下</button>

    </div>

    <div class="hot-link">
      热门搜索：
      <router-link to="/search/你我皆黑马">黑马程序员</router-link>

      <router-link to="/search/前端培训">前端培训</router-link>

      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>

    </div>

  </div>

</template>

<script>
export default {
  name: 'FindMusic',
  data() {
    return {
      words: ''
    }
  },

  methods: {
    goSearch() {
      // 1. path路径跳转
      // 1.1 query传参
      // this.$router.push(`/search?words=${this.words}`)
      // this.$router.push({
      //   path: '/search',
      //   query: {
      //     words: this.words
      //   }
      // })

      // 1.2 动态路由传参
      // this.$router.push(`/search/${this.words}`)
      // this.$router.push({
      //   path: `/search/${this.words}`
      // })

      // 2. name命名路由跳转(适合path路径长的场景)
      // 2.1 query传参
      this.$router.push({
        name: 'search',
        query: {
          words: this.words
        },
        params: {
          words: this.words
        }
      })
    }
  },
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>
